<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2019-07-08
  Time: 9:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String pash = request.getContextPath();
    String basepash = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + pash + "/";
%>
<html>
<head>
    <base href="<%=basepash%>">
    <%@include file="/publs.jsp"%>
    <title>Title</title>
</head>
<body>
    <div id="root">

        <%--<div id="mains" style="width: 1000px;height:400px;margin: 50px"></div>--%>
        <%--<div id="main" style="width: 1000px;height:400px;margin: 150px"></div>--%>
        <div id="mainssss" style="width: 1400px;height:999px;margin: 20px"></div>

    </div>

    <script>
        new Vue({
            el:"#root",
            data:{
                // zhi:{
                //     a:[ "999感冒灵", "感康 复方氨酚烷胺片", "板蓝根", "阿莫西林胶囊" ],
                //     b: [ 2525, 2000, 4000, 3000 ]
                // },
                name1:[],
                name2:[],
                pageSize:0,
                pageNo:5,
                tatop:20
            },
            methods:{
                // jiaZaiTongJiTus(){
                //     var myChart = echarts.init(document.getElementById('mains'));
                //
                //     //第一种图形
                //     // 指定图表的配置项和数据
                //     let zhi = {
                //         a:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","毛衣","手套","袜子","鞋子","内衣"],
                //         b:[5, 10, 15, 20, 25,30, 35, 40, 45, 50]
                //     };
                //         axios.get("/kuCuiTongJi").then(({data})=>{
                //             let as = data.obj;
                //             for (let i = 0; i < data.obj.length;i++) {
                //                 this.name1.push(data.obj[i].drugsName);
                //                 this.name2.push(data.obj[i].number);
                //             }
                //             // 使用刚指定的配置项和数据显示图表。
                //             myChart.setOption({
                //                 title: {
                //                     text: '库存数量'
                //                 },
                //                 tooltip: {},
                //                 legend: {
                //                     data:['数量']
                //                 },
                //                 xAxis: {
                //
                //                 },
                //                 yAxis: {
                //                     data: this.name1
                //                 },
                //                 series: [{
                //                     name: '数量',
                //                     type: 'bar',
                //                     data:this.name2
                //                 }]
                //             });
                //         })
                // },

                // asdsadadasd(){
                //     var myChart = echarts.init(document.getElementById('main'));
                //     axios.get("/kuCuiTongJi").then(({data})=> {
                //         let names = [];
                //         let namess = [];
                //         for (let i = 0; i < data.obj.length; i++) {
                //             names.push(data.obj[i].drugsName);
                //             namess.push(data.obj[i].number);
                //         }
                //         option = {
                //         xAxis: {
                //             type: 'value'
                //         },
                //         yAxis: {
                //             type: 'category',
                //             boundaryGap: true,
                //             data: names
                //         },
                //         series: [{
                //             data: namess,
                //             type: 'line',
                //             areaStyle: {}
                //         }]
                //     };
                //     myChart.setOption(option)
                //
                //     })
                // },

                sadasdasdsas(){
                    let zhi = [];
                    let zhis = []
                    var myChart = echarts.init(document.getElementById('mainssss'));
                    axios.get("/kuCuiTongJi").then(({data})=> {
                            this.tatop = data.obj.tatle;
                            console.log(this.tatop)
                        for (let i = 0; i < data.obj.list.length; i++) {
                            zhi.push(data.obj.list[i].drugsName);
                            zhis.push({value: data.obj.list[i].number,name:data.obj.list[i].drugsName})
                        }
                        option = {
                            title : {
                                text: '库存数量统计',
                                // subtext: '纯属虚构',
                                x:'center'
                            },
                            tooltip : {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                                data:zhi
                            },
                            series : [
                                {
                                    name: '数量',
                                    type: 'pie',
                                    radius : '80%',
                                    center: ['50%', '60%'],
                                    data:zhis,
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 2)'
                                        }
                                    }
                                }
                            ]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    })
                }
            },
            mounted(){
                this.sadasdasdsas();
                // this.asdsadadasd();
                // this.jiaZaiTongJiTus();
            }
        })
    </script>
</body>
</html>
